import React, { Component } from 'react'


class Content extends Component {
    render(){
        return (<h1> Content 组件 </h1>)
    }

    // ******* 组件被卸载的钩子
    componentWillUnmount(){
        console.log('组件卸载 ---- componentWillUnmount');
    }
}



export default class App extends Component {

  // ------------------ 组件挂载阶段 -------------------
  constructor(props){
    super(props)
    console.log('组件挂载阶段 constructor');
    this.state = {
        count: 100
    }
  }

    //  初始阶段挂载时调用，更新时也会被调用
    // 因为挂载和更新有专门的方法，所以该方法使用频率比较低
//   static getDerivedStateFromProps(props, state){
//     console.log('组件挂载阶段 getDerivedStateFromProps',props, state);
//     // 返回值是修改 state 数据的
//     return {
//         count: state.count + 1
//     }
//   }

    //   ******** 初始阶段和更新阶段都会被调用
    // 是一个渲染函数，第一次执行的时候需要渲染页面，后面更新的时候也需要重新渲染页面
  render() {
    console.log('组件挂载和更新阶段 render');

    return (
      <div>
        <h1>App ---- {this.state.count}</h1>

        <button onClick={()=>{
            this.setState({
                count: this.state.count + 1
            })
        }}>点击增加</button>

        {this.state.count === 100 && <Content />}
      </div>
    )
  }


  // ******** 初始挂载阶段会调用的函数
  componentDidMount(){
    // 一般情况下可以在这里进行数据请求
    console.log('组件挂载阶段 componentDidMount');
  }

//  ---------------- 挂载阶段 -------------------

// ----------------- 更新阶段 -------------------
// static getDerivedStateFromProps(props, state){
//     console.log('组件更新阶段 getDerivedStateFromProps',props, state);
//     // 返回值是修改 state 数据的
//     return {
//         count: state.count + 1
//     }
//   }

// 更新前调用的，可以用来做性能的方法，指明在特定的情况下才会重新渲染
// 在不是必须的情况下就可以返回 flase 不做渲染
// 该方法使用频率比较低
shouldComponentUpdate(nextProps, nextState) {
    console.log('更新阶段 --- shouldComponentUpdate',nextProps, nextState);

    // 这里的返回值是用来决定 render 要不要重新渲染
    // 返回值为 true 就重新渲染，false 就不做渲染
    if(nextState.count === 105){
        return false
    }else {
        return true
    }
}


// 使用该生命周期必须要实现 componentDidUpdate 一起使用
// 在最近一次渲染输出（提交到 DOM 节点）之前被调用
getSnapshotBeforeUpdate(prevProps, prevState){
    console.log('更新阶段 --- getSnapshotBeforeUpdate',prevProps, prevState);

    // 这里的返回值会作为 componentDidUpdate 的第三个参数使用
    return '你好世界'
}

// ******** 组件更新阶段调用
componentDidUpdate(prevProps, prevState, snapshot){
    console.log('更新阶段 --- componentDidUpdate',prevProps, prevState, snapshot);
}


}
